<template>
	<view class="coupon-warp">
		<view class="coupon-body">
			<view class="coupon-count">
				<text class="coupon-num">10</text>
				<text class="coupon-count-txt">张</text>
			</view>
			<view class="coupon-info">
				<view class="coupon-name">10张8寸全家福免费冲印券</view>
				<view class="coupon-detail">6寸 富士晶彩光面 冲印券将在结算时自动折扣</view>
			</view>
		</view>
		<view class="coupon-bottom">
			<view class="coupon-date">有效期：2020-08-08</view>
			<view class="coupon-btn-list">
				<view class="coupon-btn">转赠</view>
				<view class="coupon-btn">立即冲印</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
	.coupon-warp {
		display: flex;
		flex-direction: column;
		margin: 12rpx 28rpx;
		background-color: orange;
		color: #fff;
		.coupon-body {
			display: flex;
			align-items: center;
			height: 162rpx;
			.coupon-count {
				display: flex;
				margin: 0 36rpx 0 28rpx;
				font-size: 28rpx;
				.coupon-num {
					font-size: 96rpx;
				}
				.coupon-count-txt {
					margin-top: 70rpx;
				}
			}
			.coupon-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				.coupon-name {
					font-size: 32rpx;
				}
				.coupon-detail {
					margin-top: 16rpx;
					font-size: 20rpx;
				}
			}
		}
		.coupon-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;
			.coupon-date {
				margin-left: 28rpx;
				font-size: 24rpx;
			}
			.coupon-btn-list {
				display: flex;
				font-size: 28rpx;
				.coupon-btn {
					margin-right: 32rpx;
				}
			}
		}
	}
</style>
